<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="p" v-html="datainfo.description"></div>
      </div>
    </template>
  </page-scroll>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      datainfo: [],
    };
  },

  mounted() {
    this.$post(this.URL.home.article, {
      categoryType: this.$route.query.id,
    })
      .then((res) => {
        if (res.code == 0) {
          this.datainfo = res.data;
          this.title = res.data.title;
          document.title = res.data.title;
        }
      })
      .catch((err) => {
        this.$toast(err.message);
      });
  },
  methods: {
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}
.page {
  background: #311114 url("../assets/images/main-bg.png") no-repeat top center fixed;
  background-size: 100% 100%;
  min-height: 100vh;
  padding-bottom: 60px;
}

.container {
  margin-top: 20px;
  height: calc(100vh - 3rem);
  overflow: auto;
}

h2 {
  margin: 0.3rem 0 0.16rem 0;
  font-size: 0.48rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.66rem;
}
.str {
  font-size: 0.24rem;
  font-weight: 400;
  color: #a4a8b7;
  line-height: 0.34rem;
  margin-bottom: 0.3rem;
}
/deep/ .p {
  color: #fff;
  img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }
}
</style>
